<template>
    <div>
        <el-row v-show="page.total || always" justify="end" class="mt20" >
            <el-pagination
                :background="background"
                :pager-count="pagerCount"
                :current-page="page.current"
                :page-size="page.size"
                :page-sizes="[10, 20, 50, 100]"
                :total="page.total"
                :layout="layout"
                @current-change="handleCurrentChange"
                @size-change="handleSizeChange"
            >

            </el-pagination>
        </el-row>
    </div>
</template>

<script setup lang="ts" name="GlobalPage">
interface IPage {
    current: number;
    size: number;
    total: number;
}

const props = withDefaults(defineProps<{ 
    page: IPage;
    pagerCount?: number;
    background?: boolean;
    always?: boolean;
    layout?: string; 
    }>(), { 
        page: () => ({
            current: 1,
            size: 10,
            total: 0
        }),
        pageCount: 7,
        background: true,
        layout: 'total, sizes, prev, pager, next, jumper'
     })
    
const emit = defineEmits(['pageChange'])

// 每页显示条数改变
function handleSizeChange(val: number) {
    props.page.size = val
    emit('pageChange')
}

// 当前页改变
function handleCurrentChange(val: number) {
    props.page.current = val
    emit('pageChange')
}
</script>

<style scoped>

</style>